<template>
  <div>
    <!-- 上 -->
    <div style="height: 80px ;line-height: 80px;background-color: #fff;margin: 20px;">
      <el-row :gutter="20" class="hang">
        <el-col :span="5">
          <div class="color" style="background-color: #5fb2ff; width: 25PX; height: 25PX;" />
          <div class="grid-content1 bg-purple">
            终端数量： 158
          </div>
        </el-col>
        <el-col :span="5">
          <div class="color" style="background-color: #ff7573; width: 25PX; height: 25PX;" />
          <div class="grid-content1 bg-purple">
            APK总量： 151
          </div>
        </el-col>
        <el-col :span="4">
          <div class="color" style="background-color: #4dcdcd; width: 25PX; height: 25PX;" />
          <div class="grid-content1 bg-purple">
            风险总量：426
          </div>
        </el-col>
        <el-col :span="5">
          <div class="color" style="background-color: #cfcfcf; width: 25PX; height: 25PX;" />
          <div class="grid-content1 bg-purple">
            今日新增APP：54
          </div>
        </el-col>
        <el-col :span="5">
          <div class="color" style="background-color: #ffbf67; width: 25PX; height: 25PX;" />
          <div class="grid-content1 bg-purple">
            今日新增终端：341
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 中 -->
    <div style="">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h2 style="border-bottom: 1px solid black;">
              每日监测库增量
            </h2>
            <linechart />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h2 style="border-bottom: 1px solid black;">
              终端风险排行榜
            </h2>
            <div class="scroll-wrap">
              <div class="scroll-header">
                <ul class="scroll-ul">
                  <li class="scroll-li">
                    <span style="min-width: 100px; width: 100px">序号</span>
                    <span style="width: 500px">终端名称</span>
                    <span style="width: 180px">风险数量</span>
                  </li>
                </ul>
              </div>
              <div class="scroll-content">
                <vue-seamless-scroll :data="listData1" class="warp">
                  <ul class="scroll-ul" v-for="(item, index) in listData1" :key="index">
                    <li class="scroll-li">
                      <span class="number" v-text="item.number" style="width:100px"> </span>
                      <span class=" name" v-text="item.name" style="width: 500px"></span>
                      <span class="risk" v-text="item.risk" style="width: 180px"></span>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 下 -->
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h2 style="border-bottom: 1px solid black;">
              APK风险排行榜（未对齐）
            </h2>
            <div class="scroll-wrap">
              <div class="scroll-header">
                <ul class="scroll-ul">
                  <li class="scroll-li">
                    <span style=" width: 100px;">序号</span>
                    <span style="width: 500px">风险内容</span>
                    <span style="width: 180px">风险数量</span>
                  </li>
                </ul>
              </div>
              <div class="scroll-content">
                <vue-seamless-scroll :data="listData2" class="warp">
                  <ul class="scroll-ul" v-for="(item, index) in listData2" :key="index">
                    <li class="scroll-li">
                      <span class="number" v-text="item.number" style="width:100px"> </span>
                      <span class=" name" v-text="item.name" style="width: 500px"></span>
                      <span class="risk" v-text="item.risk" style="width: 180px"></span>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>

          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h2 style="border-bottom: 1px solid black;">
              各类风险占比
            </h2>
            <ring_graph3 />
          </div>
          <ring_chart3 />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import linechart from "@/views/xd/components/charts/linechart.vue"
import ring_chart3 from "@/views/xd/components/charts/ring_chart3.vue"
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { linechart, ring_chart3, vueSeamlessScroll },
  data() {
    return {
      listData1: [
        {
          number: 1,
          name: '张三手机，序列号12354489000',
          risk: 258
        },
        {
          number: 2,
          name: '李四手机，序列号12354489000',
          risk: 199
        },
        {
          number: 3,
          name: '王五手机，序列号12354489000',
          risk: 156
        },
        {
          number: 4,
          name: '王刚手机，序列号12354489000',
          risk: 145
        },
        {
          number: 5,
          name: '李华手机，序列号12354489000',
          risk: 89
        },
        {
          number: 6,
          name: '张三手机，序列号12354489000',
          risk: 258
        },
        {
          number: 7,
          name: '李四手机，序列号12354489000',
          risk: 199
        },

      ],
      listData2: [
        {
          number: 1,
          name: '读取通话记录',
          risk: 258
        },
        {
          number: 2,
          name: '读取联系人',
          risk: 199
        },
        {
          number: 3,
          name: '获取位置信息',
          risk: 156
        },
        {
          number: 4,
          name: '访问相机',
          risk: 134
        },
        {
          number: 5,
          name: '读取联系人',
          risk: 199
        },
        {
          number: 6,
          name: '获取位置信息',
          risk: 156
        },
        {
          number: 7,
          name: '访问相机',
          risk: 134
        },
      ],
    }
  }
};
</script>
<style scoped>
.hang {
  padding: 0 0 0 20px;
  color: #000;
}

.grid-content1 {
  display: inline-block;
}

.color {
  display: inline-block;
  position: relative;
  top: 3px;
  right: 6px;
}

h2 {
  color: #000000;
  font-weight: bold;
}


.el-table::before {
  background-color: transparent;
}

.hasTagsView .app-main {
  background-color: #000;
}

.warp {
  height: 270px;
  width: 450px;
  margin: 0 auto;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li,
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}

.scroll-wrap {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.scroll-header,
.scroll-content {
  width: 500px;
  display: flex;
}

.scroll-list {
  width: 100%;
  overflow: hidden;
  text-align: center;

}

.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}

.scroll-li>span {
  display: flex;
  height: 35px;
  line-height: 35px;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  padding-left: 5px;
  overflow: hidden;
}

.scroll-li>span:last-child {
  border-right: 1px solid #dcdfe6;
}

.scroll-header .scroll-li {
  background-color: #F8F9FF;
}

.scroll-header .scroll-li>span {
  font-weight: bold;
  border-top: none;
}

.scroll-content .scroll-ul:last-child .scroll-li {
  border-bottom: 1px solid #dcdfe6;
}
</style>